<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>DragZoomControl v1.2 Reference</title>
    <link rel="stylesheet" type="text/css" href="http://code.google.com/css/codesite.css"></link>
    <link rel="stylesheet" type="text/css" href="../../util/docs/template/local_extensions.css"></link>
  </head>
  <body>
    <h1>DragZoomControl</h1>
    <p>
This library lets you add a control to the map which will let    the user zoom by dragging a rectangle.    Back Button functionality provides the user with a one click means to    return the map state to its state prior to the DragZoom.  Sequential    DragZooms are backed out in reverse order.</p>
    
      <h2><a name="DragZoomControl"></a>class DragZoomControl</h2>
      <p>This class lets you add a control to the map which, when clicked, will    let the map user zoom by dragging a rectangle on the map.  This class extends <code>GControl</code>.</p>
      
        <h3>Constructor</h3>
        <table summary="class DragZoomControl - Constructor" width="90%">
          
          <tbody>
            <tr>
              <th>Constructor</th>
              
              <th>Description</th>
            </tr>
            
              <tr class="odd">
                <td><code>DragZoomControl(<span class="type" title="type:  DragZoomControlBoxStyleOptions">opts_boxStyle</span>, <span class="type" title="type:  DragZoomControlOtherOptions">opts_other</span>, <span class="type" title="type:  DragZoomControlCallbackOptions">opts_callbacks</span>)</code></td>
                
                <td>Ceates a DragZoomControl with the specified options (hashes). All parameters    are required, even if empty hashes.</td>
              </tr>
            
          </tbody>
        </table>
      
        <h3>Methods</h3>
        <table summary="class DragZoomControl - Methods" width="90%">
          
          <tbody>
            <tr>
              <th>Methods</th>
              
                
                  <th>Return&nbsp;Value</th>
                
              
              <th>Description</th>
            </tr>
            
              <tr class="odd">
                <td><code>initiateZoom()</code></td>
                
                  
                    <td><code>None</code></td>
                  
                
                <td>A DragZoom operation is initiated as if the user had clicked the DragZoom    button.  For use in custom map controls.</td>
              </tr>
            
              <tr class="even">
                <td><code>initiateZoomBack()</code></td>
                
                  
                    <td><code>None</code></td>
                  
                
                <td>A DragZoom back operation is initiated as if the user had clicked the    DragZoom back button.  For use in custom map controls.</td>
              </tr>
            
              <tr class="odd">
                <td><code>saveMapContext(<span class="type" title="type:  String">text</span>)</code></td>
                
                  
                    <td><code>None</code></td>
                  
                
                <td>Method called to save the map context before the zoom.  The map state is    pushed onto the context stack, the backButtonHTML is set to 'text', and    the back button is made visible.</td>
              </tr>
            
          </tbody>
        </table>
      
        <h3>Events</h3>
        <table summary="class DragZoomControl - Events" width="90%">
          
          <tbody>
            <tr>
              <th>Events</th>
              
                
                  <th>Arguments</th>
                
              
              <th>Description</th>
            </tr>
            
              <tr class="odd">
                <td><code>addOverlay</code></td>
                
                  
                    <td><code><span class="type" title="type:  GPolyline">overlay</span></code></td>
                  
                
                <td>This event is fired when the mouse button is released after a zoom    rectangle has been specified.</td>
              </tr>
            
              <tr class="even">
                <td><code>removeoverlay</code></td>
                
                  
                    <td><code><span class="type" title="type:  GPolyline">overlay</span></code></td>
                  
                
                <td>This event is fired when the <code>GPolyline</code> representing the    frame around the selected area is removed. This occurs    <code>overlayRemoveTime</code> milliseconds after the area was    specified.</td>
              </tr>
            
          </tbody>
        </table>
      
    
      <h2><a name="DragZoomControlBoxStyleOptions"></a>class DragZoomControlBoxStyleOptions</h2>
      <p>Instances of this class are used in the <code>opts_boxStyle</code> argument    to the constructor of the <code><a href="reference.html#DragZoomControl">DragZoomControl</a></code> class.  There is no constructor for this class.  Instead, this class is instantiated as a javascript object literal.</p>
      
        <h3>Properties</h3>
        <table summary="class DragZoomControlBoxStyleOptions - Properties" width="90%">
          
          <tbody>
            <tr>
              <th>Properties</th>
              
                
                  <th>Type</th>
                
              
              <th>Description</th>
            </tr>
            
              <tr class="odd">
                <td><code>border</code></td>
                
                  
                    <td><code>String</code></td>
                  
                
                <td>CSS-style declaration of border.  The default value is <code>"2px solid blue"</code>.</td>
              </tr>
            
              <tr class="even">
                <td><code>fillColor</code></td>
                
                  
                    <td><code>String</code></td>
                  
                
                <td>Hex value of fill color.  The default value is <code>"#000"</code>.</td>
              </tr>
            
              <tr class="odd">
                <td><code>opacity</code></td>
                
                  
                    <td><code>Number</code></td>
                  
                
                <td>Opacity of the veil from 0-1.  The default value is <code>0.2</code>.</td>
              </tr>
            
          </tbody>
        </table>
      
    
      <h2><a name="DragZoomControlCallbackOptions"></a>class DragZoomControlCallbackOptions</h2>
      <p>Instances of this class are used in the <code>opts_callbacks</code>    argument to the constructor of the <code><a href="reference.html#DragZoomControl">DragZoomControl</a></code> class, and    allow you to set callback functions for various DragZoom events.  There is no constructor for this class.  Instead, this class is instantiated as a javascript object literal.</p>
      
        <h3>Properties</h3>
        <table summary="class DragZoomControlCallbackOptions - Properties" width="90%">
          
          <tbody>
            <tr>
              <th>Properties</th>
              
                
                  <th>Type</th>
                
              
              <th>Description</th>
            </tr>
            
              <tr class="odd">
                <td><code>backbuttonclick</code></td>
                
                  
                    <td><code>Function</code></td>
                  
                
                <td>Called after the map context is    restored as a result of clicking the DragZoom back button or by calling    the initiateZoomBack() method.  Callback args are: method {Boolean} --    set true if this backbuttonclick was to restore context set by the    saveMapContext(text) method, else false.</td>
              </tr>
            
              <tr class="even">
                <td><code>buttonclick</code></td>
                
                  
                    <td><code>Function</code></td>
                  
                
                <td>Called when DragZoom is activated by    clicking on the DragZoom button or by calling the buttonclick() method.</td>
              </tr>
            
              <tr class="odd">
                <td><code>dragend</code></td>
                
                  
                    <td><code>Function</code></td>
                  
                
                <td>Called when the user releases the mouse button    after dragging the rectangle.  Callback args are: NW {GLatLng}, NE    {GLatLng}, SE {GLatLng}, SW {GLatLng}, NW {GPoint}, NE {GPoint}, SE    {GPoint}, SW {GPoint}.  The first 4 are the latitudes/longitudes; the    last 4 are the pixel coords on the map.</td>
              </tr>
            
              <tr class="even">
                <td><code>dragging</code></td>
                
                  
                    <td><code>Function</code></td>
                  
                
                <td>Called repeatedly while the user is dragging.    Callback args are startX,startY, currentX,currentY -- the pixel values of    the start of the drag, and the current drag point, respectively.</td>
              </tr>
            
              <tr class="odd">
                <td><code>dragstart</code></td>
                
                  
                    <td><code>Function</code></td>
                  
                
                <td>Called when user starts to drag a rectangle.    Callback args are x,y -- the pixel values, relative to the    upper-left-hand corner of the map, where the user began dragging.</td>
              </tr>
            
          </tbody>
        </table>
      
    
      <h2><a name="DragZoomControlOtherOptions"></a>class DragZoomControlOtherOptions</h2>
      <p>Instances of this class are used in the <code>opts_other</code> argument    to the constructor of the <code><a href="reference.html#DragZoomControl">DragZoomControl</a></code> class.  There is no constructor for this class.  Instead, this class is instantiated as a javascript object literal.</p>
      
        <h3>Properties</h3>
        <table summary="class DragZoomControlOtherOptions - Properties" width="90%">
          
          <tbody>
            <tr>
              <th>Properties</th>
              
                
                  <th>Type</th>
                
              
              <th>Description</th>
            </tr>
            
              <tr class="odd">
                <td><code>backButtonEnabled</code></td>
                
                  
                    <td><code>Boolean</code></td>
                  
                
                <td>Determines whether or not the    back button functionality is turned on.  The default value is <code>false</code>.</td>
              </tr>
            
              <tr class="even">
                <td><code>backButtonHTML</code></td>
                
                  
                    <td><code>String</code></td>
                  
                
                <td>HTML which is placed in the back button    when the button is activated.</td>
              </tr>
            
              <tr class="odd">
                <td><code>backButtonStyle</code></td>
                
                  
                    <td><code>Object</code></td>
                  
                
                <td>A    hash of CSS styles for the back button which will be applied when the    button is activated.  The default value is <code>{background: '#FFF', display: 'none'}</code>.</td>
              </tr>
            
              <tr class="even">
                <td><code>buttonHTML</code></td>
                
                  
                    <td><code>String</code></td>
                  
                
                <td>The zoom button HTML in    non-activated state.  The default value is <code>"zoom ..."</code>.</td>
              </tr>
            
              <tr class="odd">
                <td><code>buttonStartingStyle</code></td>
                
                  
                    <td><code>Object</code></td>
                  
                
                <td>A hash of css    styles for the zoom button which are common to both un-activated and activated state.  The default value is <code>{width: '52px', border: '1px solid    black', padding: '2px'}</code>.</td>
              </tr>
            
              <tr class="even">
                <td><code>buttonStyle</code></td>
                
                  
                    <td><code>Object</code></td>
                  
                
                <td>A hash of css styles    for the zoom button which will be applied when the button is in    un-activated state.  The default value is <code>{background: '#FFF'}</code>.</td>
              </tr>
            
              <tr class="odd">
                <td><code>buttonZoomingHTML</code></td>
                
                  
                    <td><code>String</code></td>
                  
                
                <td>HTML which    is placed in the zoom button when the button is activated.  The default value is <code>"Drag a region on the map"</code>.</td>
              </tr>
            
              <tr class="even">
                <td><code>buttonZoomingStyle</code></td>
                
                  
                    <td><code>Object</code></td>
                  
                
                <td>A hash of css    styles for the zoom button which will be applied when the button is    activated.  The default value is <code>{background: '#FF0'}</code>.</td>
              </tr>
            
              <tr class="odd">
                <td><code>minDragSize</code></td>
                
                  
                    <td><code>Number</code></td>
                  
                
                <td>Often, users will try to "cancel" a    dragzoom operation by resizing their selected rectangle to a point.    This specifies a minimum size in pixels for the dragged rectangle to    trigger a zoom.  Something like 3-5 is sensible for most cases.  The default value is <code>0</code>.</td>
              </tr>
            
              <tr class="even">
                <td><code>overlayRemoveTime</code></td>
                
                  
                    <td><code>Number</code></td>
                  
                
                <td>The number of milliseconds to    wait before removing the rectangle indicating the zoomed-in area after    the zoom has happened.  The default value is <code>6000</code>.</td>
              </tr>
            
              <tr class="odd">
                <td><code>rightMouseZoomOutEnabled</code></td>
                
                  
                    <td><code>Boolean</code></td>
                  
                
                <td>Whether to zoom out when    a drag with the right mouse button occurs.  The default value is <code>false</code>.</td>
              </tr>
            
              <tr class="even">
                <td><code>stickyZoomEnabled</code></td>
                
                  
                    <td><code>Boolean</code></td>
                  
                
                <td>Whether or not the control    stays in "zoom mode" until turned off. When true, the user can zoom    repeatedly, until clicking on the zoom button again to turn zoom mode    off.  The default value is <code>false</code>.</td>
              </tr>
            
          </tbody>
        </table>
      
    
    <!-- <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
    <script type="text/javascript">
      _uacct = "UA-964209-4";
      urchinTracker();
    </script> -->
  </body>
</html>
